<template>
<!-- //没有使用到 -->
    <div style="background-color:rgb(245, 245, 245);padding-bottom:45px;">        
        <!-- 回到顶部 -->
        <template>
            <el-backtop :bottom="100"></el-backtop>
        </template>
        <el-header>
            <el-menu  id="main1-menu"  class="el-menu-demo" mode="horizontal"
                active-text-color="#E6A23C">        
                <div style="float:right;padding:15px 50px;">
                    <router-link to="/surveylist">
                        <el-button round>返回问卷库</el-button>
                    </router-link>                                      
                </div>
            </el-menu>
        </el-header>
        <!-- <div class="temp"></div> -->
        <div class="title">
            <h2>{{stitle}}</h2>
        </div>
        <div class="temp1"></div>
        <div>            
            <el-card class="context" shadow="always">
                <div class="survey-form">
                    <div v-if="publish===0">
                        <h3>该问卷为私密状态</h3>
                    </div>
                    <el-form id="surveyData" ref="surveyData" :rules="rules" :model="surveyData">
                        <el-form-item v-for="(question,i) in questions" :key="i" :prop="'res['+i+'].answer'">
                            <div class="qtitle-css">{{i+1}}、{{question.qtitle}}</div>
                            <!-- 单选题 -->
                            <div v-if="question.qtype===1 && question.qid===surveyData.res[i].qid" style="width:80%;">
                                <span v-for="(op,index) in question.options" :key="index">
                                    <el-radio v-model="surveyData.res[i].answer" :label="op.oid">{{op.option}}&nbsp;&nbsp;&nbsp;</el-radio>
                                </span>
                            </div>
                            <!-- 多选题 -->
                            <div v-if="question.qtype===2 && question.qid===surveyData.res[i].qid" style="width:80%;">
                                <el-checkbox-group v-model="surveyData.res[i].answer">
                                    <span v-for="op in question.options" :key="op" style="width:80%;">
                                        <el-checkbox :label="op.oid">{{op.option}}&nbsp;&nbsp;&nbsp;</el-checkbox>
                                    </span>
                                </el-checkbox-group>
                            </div>
                            <!-- 简答题 -->
                            <div v-if="question.qtype===3 && question.qid===surveyData.res[i].qid">
                                <el-input type="textarea" v-model="surveyData.res[i].answer" show-word-limit style="width:400px;" placeholder="请输入"></el-input>
                            </div>
                        </el-form-item>                     
                        <el-form-item>
                            <el-row style="width:75%;text-align:center;">
                                <el-button v-if="publish===1" type="warning" @click="openFullScreen">提交</el-button>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<style>
    body,html{
        background:rgb(245, 245, 245) !important;
    }
    
    #main1-menu {
        background-color: rgba(255, 255, 255, 0);
        border-bottom: none;
        height: 70px;
    }
    .temp{
        width: 100%;
        height: 50px;
    }
    .temp1{
        width: 100%;
        height: 25px;        
    }
    .border{
        border: 1px solid red;
    }
    .title{
        margin: 0 auto;
        margin-top: 30px;
        width: 980px;

        color: #E6A23C;
        text-align: center;
    }
    .context{
        margin: 0 auto;
        padding-top: 10px;
        padding-left: 50px;
        /* padding: 10px 50px; */

        width: 784px;
        /* height: 600px; */

        background: rgba(255, 255, 255, 0.5);     
    }
    .qtitle-css{
        color: #E6A23C;
        font-size: 16px;
    }
    .survey-form{
        margin: 0 auto;
        width: 730px;
        /* height: 400px; */
        font-size: 16px;   
    }    
    .confirmButton{
        background-color: #E6A23C !important;
        border-color: #E6A23C !important;
        font-size: 14px;
    }
    .cancelButton{
        font-size: 14px;
    }
    

</style>

<script>
export default {
    data(){     
        var checkAnswer = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('这一题还没有填哦！'));
            }else{
                callback();
            }
        };   
        return {
            sid: this.$route.query.sid,
            publish:'',
            form:{
                options:''
            },
            surveyData:{
                sid: '',
                res:[]
            },
            rules:{
                res:[]
            },
            stitle: '',
            questions: []
        }
    },
    methods:{
        //加载问卷内容
        loadSurveyInfo(){
            console.log(this.sid)
            if(this.sid > 0){
                this.axios.post('/api/surveyPage',{
                    sid: this.sid
                 })
                .then(res => {
                    console.log(res)
                    if (res.status===200) {
                        this.stitle = res.data.stitle;
                        document.title = this.stitle;
                        this.publish = res.data.publish;
                        if (this.publish===0) {
                            this.$alert('该问卷暂未发布，请选择其他问卷。', '提示', {
                                confirmButtonText: '前往问卷库',
                                confirmButtonClass:'confirmButton',
                                type: 'warning',
                                showClose: false
                            }).then(() => {
                                this.$router.push("/surveylist");
                            });
                        }else{
                            this.surveyData.sid = this.sid;
                            this.questions = res.data.questions;
                            this.questions.forEach(element => {
                                if (element.qtype === 2) {
                                    //多选题，添加的回答数据结构为数组
                                    this.surveyData.res.push({
                                        qid:element.qid,
                                        qtype: element.qtype,
                                        answer:[]
                                    });
                                }else{
                                    this.surveyData.res.push({
                                        qid:element.qid,
                                        qtype: element.qtype,
                                        answer:''
                                    });
                                } 
                                this.rules.res.push({
                                    answer:[{required: true, validator: this.checkAnswer,message:"这一题还没有填哦！", trigger: 'blur'}]
                                });    
                            });
                            console.log(this.surveyData.res)
                        }
                            
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            }
        },
        // 提交回答数据效果
        openFullScreen() {
            const loading = this.$loading({
            lock: true,
            text: '正在提交回答数据...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                this.submitForm('surveyData');
                loading.close();
            }, 800);
        },
        //操作成功消息提示
        msgSuccessShow(){
            this.$alert('您已完成该份问卷！', '提交成功', {
                confirmButtonText: '前往问卷库',
                confirmButtonClass:'confirmButton',
                type: 'success',
                showClose: false
            }).then(() => {
                this.$router.push("/surveylist");
            });
        },
        //操作失败消息提示
        msgFailShow(){
            this.$alert('出现错误，请稍后再试。', '提交失败', {
                confirmButtonText: '再试一次',
                confirmButtonClass:'confirmButton',
                type: 'info',
                showClose: false
            }).then(() => {
                this.$router.go(0);
            });
            
                // 
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(JSON.stringify(this.surveyData))
                    this.axios.post("api/submitRes",JSON.stringify(this.surveyData))
                    .then(res => {
                        console.log(res)
                        if (res.status===200) {
                            if (res.data.msg==="success") {
                                //显示操作成功对话框
                                this.msgSuccessShow();
                            }else{
                                //显示操作失败对话框
                                this.msgFailShow();
                            }
                        }
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                } else {
                    this.$message({
                        type:'warning',
                        message: "还有问题没有做哦，回去检查看看吧~"
                    })
                    return false;
                }
            });
        }
    },
    mounted(){
        this.loadSurveyInfo();
        
    }
}
</script>